<template>
	<view class="user-center">
		<!-- 顶部用户信息区域 -->
		<view class="user-info-card">
			<image class="avatar" :src="userInfo.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</text>
				<text class="username" v-else @click="syncUserInfo()">点击同步昵称</text>
				<view class="mobile-section" @click="handleMobile">
					<text class="mobile" v-if="userInfo.mobile">{{formatMobile(userInfo.mobile)}}</text>
					<text class="bind-mobile" v-else>点击绑定手机号 ></text>
				</view>
				<text v-if="userInfo.invitation_code" class="user-id">邀请码: {{userInfo.invitation_code}}</text>
			</view>
		</view>

		<!-- 余额展示 -->
		<view class="balance-card">
			<view class="balance-row">
				<view class="balance-section" @click="handleMenuClick('/pages/wallet/wallet')">
					<text class="balance-label">当前余额</text>
					<text class="balance-value">￥{{userInfo.balance || '0.00'}}</text>
				</view>
				<view class="balance-divider"></view>
                <view class="balance-section" @click="handleMenuClick('/pages/wallet/cash-list')">
                    <text class="balance-label">近一年提现</text>
                    <text class="balance-value">￥{{userInfo.year_cash_amount || '0.00'}}</text>
                </view>
			</view>
			<view class="balance-divider-horizontal" v-if="isLogin"></view>
			<view class="balance-row" v-if="isLogin">
                <view class="balance-section" @click="waitingMessage()">
                    <text class="balance-label">待补贴金额</text>
                    <text class="balance-value">￥{{userInfo.waiting_settlement_amount || '0.00'}}</text>
                </view>
				<view class="balance-divider"></view>
                <view class="balance-section" @click="handleMenuClick('/pages/rebate/rebate')">
                    <text class="balance-label">近一年补贴</text>
                    <text class="balance-value">￥{{userInfo.year_rebate_amount || '0.00'}}</text>
                </view>
			</view>
		</view>

		<!-- 订单入口宫格 -->
		<view class="grid-section" v-if="userInfo.unions.length > 0">
			<view class="grid-title">我的订单</view>
			<view class="grid-list">
				<view class="grid-item" v-for="(union, index) in userInfo.unions" :key="index" @click="handleOrderClick(union.union_type)">
					<image class="grid-icon" :src="getUnionIcon(union.union_type)" mode="aspectFit"></image>
					<text class="grid-text">{{union.union_name}}订单</text>
				</view>
			</view>
		</view>

		<!-- 团队入口宫格 -->
		<view class="grid-section" v-if="userInfo.invitation_code">
			<view class="grid-title">我的团队</view>
			<view class="grid-list">
				<view class="grid-item" @click="handleMenuClick('/pages/group/group-list')">
					<image class="grid-icon" src="/static/group.png" mode="aspectFit"></image>
					<text class="grid-text">团队列表</text>
				</view>
				<view class="grid-item" @click="handleMenuClick('/pages/group/group-manage')">
					<image class="grid-icon" src="/static/user_add.png" mode="aspectFit"></image>
					<text class="grid-text">成员管理</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单宫格 -->
		<view class="grid-section">
			<view class="grid-title">常用功能</view>
			<view class="grid-list">
				<view class="grid-item" @click="handleMenuClick('/pages/wallet/wallet')">
					<image class="grid-icon" src="/static/wallet.png" mode="aspectFit"></image>
					<text class="grid-text">我的钱包</text>
				</view>
				<view class="grid-item" @click="handleMenuClick('/pages/wallet/cash-list')">
					<image class="grid-icon" src="/static/cash.png" mode="aspectFit"></image>
					<text class="grid-text">提现记录</text>
				</view>
                <view class="grid-item" v-if="isLogin" @click="handleMenuClick('/pages/rebate/rebate')">
                    <image class="grid-icon" src="/static/rebate.png" mode="aspectFit"></image>
                    <text class="grid-text">补贴记录</text>
                </view>
				<view class="grid-item" v-if="isLogin" @click="handleMenuClick('/pages/message/message-switch')">
                    <image class="grid-icon" src="/static/switch.png" mode="aspectFit"></image>
                    <text class="grid-text">消息开关</text>
                </view>
                <view class="grid-item" v-if="isLogin && !userInfo.mobile" @click="handleMenuClick('/pages/index/mobile')">
                    <image class="grid-icon" src="/static/mobile.png" mode="aspectFit"></image>
                    <text class="grid-text">绑定手机号</text>
                </view>
                <view class="grid-item" v-if="isLogin" @click="syncUserInfo()">
                    <image class="grid-icon" src="/static/sync.png" mode="aspectFit"></image>
                    <text class="grid-text">同步昵称头像</text>
                </view>
			</view>
		</view>
	</view>
</template>

<style>
.user-center {
	min-height: 100vh;
	background-color: #f6f7fb;
	padding-bottom: 40rpx;
}

.user-info-card {
	margin: 20rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #2b85ff, #5ea4ff);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 4rpx 16rpx rgba(43, 133, 255, 0.1);
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
}

.user-detail {
	flex: 1;
}

.username {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: 600;
	margin-bottom: 12rpx;
	display: block;
}

.mobile-section {
	margin: 8rpx 0;
}

.mobile {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
}

.bind-mobile {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	padding: 4rpx 0;
}

.bind-mobile:active {
	opacity: 0.8;
}

.user-id {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.menu-section {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 0 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 20rpx;
	position: relative;
}

.menu-item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 88rpx;
	right: 0;
	bottom: 0;
	height: 1rpx;
	background-color: #f5f5f5;
}

.menu-item-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
}

.menu-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.arrow-right {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.3;
}

.balance-card {
	margin: 20rpx;
	padding: 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
}

.balance-row {
	display: flex;
	align-items: center;
}

.balance-divider-horizontal {
	height: 2rpx;
	background-color: #f0f0f0;
	margin: 30rpx 0;
}

.balance-section {
	flex: 1;
	text-align: center;
}

.balance-divider {
	width: 2rpx;
	height: 80rpx;
	background-color: #f0f0f0;
	margin: 0 30rpx;
}

.balance-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 12rpx;
	display: block;
}

.balance-value {
	font-size: 40rpx;
	color: #333;
	font-weight: bold;
}

/* 宫格样式 */
.grid-section {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.grid-title {
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	padding: 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.grid-list {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0;
}

.grid-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
}

.grid-item:active {
	opacity: 0.7;
}

.grid-icon {
	width: 64rpx;
	height: 64rpx;
	margin-bottom: 12rpx;
}

.grid-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}
</style>

<script>
import request from '@/utils/request'
import auth from "../../utils/auth";

export default {
	data() {
		return {
			userInfo: {
				nickname: '',
				avatar: '',
				mobile: '',
				balance: '',
				invitation_code: '',
				waiting_settlement_amount: '',
				year_cash_amount: '',
				year_rebate_amount: '',
				unions: []
			},
            isLogin: false
		}
	},
	onShow() {
        let state = auth.getUrlParam('state')
        if (state && state === 'sync') {
            this.syncUserInfo()
            return
        }
        this.getUserInfo()
	},
	methods: {
		// 获取用户信息
		async getUserInfo() {
			try {
				const res = await request({
					url: '/wechat/user/me',
                    data: {
                        with_unions: 1,
                        with_amounts: 1
                    }
				})

				if (res.code === 0 && res.data) {
                    this.isLogin = true
					this.userInfo = {
						...this.userInfo,
						...res.data,
						balance: res.data.balance || '0.00'
					}
				}
			} catch (err) {
				console.error('获取用户信息失败', err)
			}
		},

		// 格式化手机号
		formatMobile(mobile) {
			return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
		},

		// 处理手机号点击
		handleMobile() {
			if (!this.userInfo.mobile) {
				uni.navigateTo({
					url: '/pages/index/mobile'
				})
			}
		},

		// 处理订单点击
		handleOrderClick(union) {
			uni.navigateTo({
				url: `/pages/order/${union}-order`
			})
		},

		// 获取平台图标
        getUnionIcon(type) {
			const iconMap = {
				// 'jd': '/static/jd.png',
				// 'tb': '/static/tb.png',
			}
			return iconMap[type] || '/static/order.png'
		},

		// 处理菜单点击
		handleMenuClick(path) {
			if (path) {
				if (path === 'no') {
					uni.showToast({
						title: '开发中',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.navigateTo({
					url: path
				})
			}
		},
        // 待补贴金额提示
        waitingMessage() {
            uni.showToast({
                title: '订单完成后将统计到待补贴金额',
                icon: 'none',
                duration: 2000
            })
            return
        },
        syncUserInfo() {
            uni.showToast({
                title: '同步头像过程比较缓慢，请耐心等待1分钟后刷新页面',
                icon: 'none',
                duration: 2000
            })
            setTimeout(() => {
                auth.wxH5Login('sync')
            }, 2000)
        },

		// 重载页面数据
		reload() {
			this.getUserInfo()
		}
	}
}
</script>
